<template>
  <!-- video模块 -->
  <div class="mod-my-video">
    <div class="container" v-if="code == 200">
      <div class="my-video-main">
        <div class="my-video-box">
          <div class="my-video-hd">
            <h1 class="my-video-title">
              {{ videoDetail.title }}
            </h1>
            <h4 class="my-video-creator">
              by
              <a
                href="javascript:;"
                :title="nickname"
                @click="clickUserDetail(userId)"
              >
                {{ nickname }}
              </a>
            </h4>
          </div>
          <!-- <video
            class="my-video-video"
            :src="videoUrl"
            controls
            preload="auto"
          ></video> -->
          <video-box
            :brs="brs"
            :r="r"
            :url="videoUrl"
            @boxChangeBr="getVideoUrl"
          ></video-box>
          <!-- :key="r" -->
          <div class="my-video-toolbar">
            <a class="mod-btn" title="点赞">
              <i class="iconfont">&#xe8b0;</i>
              ({{ videoDetail.praisedCount }})
            </a>
            <a class="mod-btn" title="收藏">
              <i class="iconfont">&#xe8c9;</i>
              ({{ videoDetail.subscribeCount }})
            </a>
            <a class="mod-btn" title="分享">
              <i class="iconfont">&#xe8af;</i>
              ({{ videoDetail.shareCount }})
            </a>
          </div>
        </div>
        <div class="my-video-comment" v-if="commentData">
          <comment ref="comment" :commentData="commentData"></comment>
          <div class="comment-el-pagination" v-if="commentData.total > 20">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="20"
              layout="prev, pager, next, jumper"
              :total="commentData.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="my-video-relative">
        <div class="my-video-relative-box">
          <h2 class="my-video-relative-hd">视频简介</h2>
          <div class="video-publish">
            发布时间：{{ videoDetail.publishTime | showDate }}
          </div>
          <div class="video-playCount">
            播放次数：{{ videoDetail.playTime }}
          </div>
          <div class="video-desc">
            <p>{{ videoDetail.description }}</p>
          </div>
        </div>
        <div class="my-video-relative-box" v-if="videoRelative.length > 0">
          <h2 class="my-video-relative-hd">相关推荐</h2>
          <video-list
            :item="item"
            v-for="item in videoRelative"
            :key="item.vid"
          ></video-list>
        </div>
      </div>
    </div>
    <no-resource v-if="code == 404"></no-resource>
  </div>
</template>

<script>
import { formatDate } from "common/date.js";
import Comment from "views/toplists/child/Comment.vue";
import VideoList from "components/videolist/VideoList.vue";
import VideoBox from "components/videobox/VideoBox.vue";
import NoResource from "views/notfound/NoResource";

export default {
  components: {
    Comment,
    VideoList,
    VideoBox,
    NoResource,
  },
  data() {
    return {
      videoDetail: {},
      nickname: "",
      userId: 0,
      videoUrl: "",
      videoRelative: [],
      likedCount: "",
      commentData: {},
      currentPage: 1,
      // 分辨率数据
      brs: [],
      // 默认分辨率
      r: 1080,
      id: "",
      code: 200,
    };
  },
  filters: {
    // 过滤器转换时间戳
    showDate(value) {
      const date = new Date(value);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    console.log(this.id);
    this.getVideoDetail();
    this.getVideoUrl(1080);
    this.getComment();
    this.getVideoRelative();
    document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
  },
  methods: {
    clickUserDetail(id) {
      this.playUserDetail(id);
    },
    g(val) {
      console.log(val);
    },
    getVideoRelative() {
      this.axios({
        /* 相关视频接口地址 */
        url: "/related/allvideo?id=" + this.id,
      })
        .then((res) => {
          this.videoRelative = res.data.data;
          // console.log(this.videoRelative);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange() {
      // console.log(this.currentPage);
      // console.log(`当前页: ${val}`);
      this.getComment();
      // 点击分页后，滚动到评论的头部，141为页面头部组件的高度
      document.documentElement.scrollTo({
        top: this.$refs.comment.$el.offsetTop + 141,
        behavior: "smooth",
      });
    },
    getComment() {
      this.axios({
        /* 视频评论接口地址 */
        url:
          "/comment/video?id=" +
          this.id +
          "&offset=" +
          (this.currentPage - 1) * 20,
      })
        .then((res) => {
          this.commentData = res.data;
          // console.log(this.commentData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getVideoUrl(clickR) {
      this.axios({
        /* video播放地址接口地址 */
        url: "/video/url?id=" + this.id + "&r=" + clickR,
      })
        .then((res) => {
          this.videoUrl = res.data.urls[0].url;
          this.r = res.data.urls[0].r;
          // console.log(this.r);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getVideoDetail() {
      this.axios({
        // video详情接口地址
        url: "/video/detail?id=" + this.id,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.videoDetail = res.data.data;
            this.brs = res.data.data.resolutions;
            this.nickname = res.data.data.creator.nickname;
            this.userId = res.data.data.creator.userId;
            // console.log(this.brs);
            // console.log(this.videoDetail);
            // console.log(typeof res.data.data.durationms);
          }
          if (res.data.code == 404 || res.data.code == 400) {
            this.code = 404;
          }
        })
        .catch((err) => {
          console.log(err);
          this.code = 404;
        });
    },
  },
};
</script>

<style>
.mod-my-video {
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.my-video-main {
  float: left;
  width: 850px;
}
.my-video-video {
  width: 100%;
  height: 100%;
}
.my-video-hd,
.my-video-box {
  position: relative;
  margin-bottom: 30px;
}
.my-video-title,
.my-video-creator {
  margin: 0;
  width: 100%;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-video-creator {
  padding-left: 20px;
  padding-top: 10px;
}
.my-video-creator a:hover {
  color: var(--color-theme);
}
.my-video-toolbar {
  margin: 10px 0;
}
/* my-video-relative */
.my-video-relative {
  float: right;
  margin-top: 90px;

  width: 300px;
  overflow: hidden;
}
.my-video-relative-box {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.my-video-relative-hd {
  margin-bottom: 10px;
  font-weight: 400;
  height: 36px;
  line-height: 36px;
}
.video-publish,
.video-playCount {
  padding-left: 10px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #999;
}
.video-desc {
  margin: 10px 0;
  padding: 10px;
}
.video-desc p {
  font-size: 14px;
  line-height: 20px;
}
.my-video-toolbar .mod-btn {
  min-width: 122px;
  text-align: center;
}
.comment-el-pagination {
  position: relative;
  text-align: center;
  margin: 20px auto;
}
</style>